<template>
  <div class="product">
    <header class="product-header">
      <BaseSearch :config="searchConfig" v-bind="form" ref="search" isShowType :navList="navList"></BaseSearch>
    </header>
    <div class="product-add" @click="addOrEdit()" v-if="isCanAdd"><i class="el-icon-plus mr10"></i>添加</div>
    <main class="product-container">
      <section class="product-container__item" v-bind="table" v-for="(item, index) in table.data" :key="index">
        <header class="product-container__item--header">
          <img :src="item.appLogo" alt="" />
          <h6>{{ item.name }}</h6>
        </header>
        <article class="product-container__item--main">
          <div class="product-container__item--main__top">
            <p class="mb10">类型：{{ navList[item.productType].label }}</p>
            <p class="mb10">状态：{{ STATUS[item.status] }}</p>
            <p>所属项目：{{ item.appName }}</p>
            <p>编码：{{ item.code }}</p>
          </div>
        </article>
        <footer class="product-container__item--footer">
          <section
            class="product-container__item--footer__left"
            @click="goProductList(item)"
            v-if="isCanAssociatedProduct"
          >
            关联产品({{ item.productSum }})
          </section>
          <section class="product-container__item--footer__right">
            <div class="mr20" @click="addOrEdit(item)" v-if="isCanEdit">
              <img src="@/assets/edit.png" alt="" />
              <span>编辑</span>
            </div>
            <div @click="goDetail(item)" v-if="isCanDetail">
              <img src="@/assets/detail.png" alt="" />
              <span>详情</span>
            </div>
          </section>
        </footer>
      </section>
    </main>
    <BasePagination :isModifyBackground="true" v-bind="table"></BasePagination>
    <AddEditPop ref="AddEditPop" @popClose="popClose"></AddEditPop>
  </div>
</template>

<script>
import BaseSearch from '@/components/BaseSearch/index.vue'
import BasePagination from '@/components/BaseTable/pagination.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
import { TYPE_NAV_LIST, STATUS, STATUS_LIST } from '@/constants/baseModel'
import AddEditPop from '../components/AddEditPop.vue'

const service = async params => {
  const { records, total } = await http.get('/product_sets', {
    params: params,
  })

  return {
    data: records,
    total: total,
  }
}

export default {
  name: 'productMangementList',
  components: {
    BaseSearch,
    BasePagination,
    AddEditPop,
  },
  mixins: [FormTableMixin(service)],
  data() {
    return {
      STATUS,
      navList: TYPE_NAV_LIST,
      searchConfig: [
        { component: 'input', label: '产品集名称', prop: 'setName' },
        {
          component: 'select',
          label: '状态',
          prop: 'status',
          value: '',
          options: STATUS_LIST,
        },
        {
          component: 'select',
          label: '所属项目',
          prop: 'appCode',
          value: '',
          options: [],
        },
      ],
    }
  },
  computed: {
    isCanAdd() {
      return this.$checkAccess('MENU_PRODUCT_MANAGEMENT_ADD')
    },
    isCanEdit() {
      return this.$checkAccess('MENU_PRODUCT_MANAGEMENT_EDIT')
    },
    isCanDetail() {
      return this.$checkAccess('MENU_PRODUCT_MANAGEMENT_DETAIL')
    },
    isCanAssociatedProduct() {
      return this.$checkAccess('MENU_PRODUCT_MANAGEMENT_ASSOCIATED_PRODUCT')
    },
  },
  methods: {
    addOrEdit(item) {
      this.$refs.AddEditPop.show(item)
    },
    goProductList(item) {
      this.$router.push({ name: 'productList', query: { productSetCode: item.code, productSetId: item.id } })
    },
    goDetail(item) {
      this.$router.push({ name: 'productDetail', query: { productSetId: item.id } })
    },
    popClose(val) {
      if (val) {
        this.$refs.search.$refs.searchForm.resetFields()
        this.$refs.search.$refs.BaseType.onSwitchType(0, '')
        setTimeout(() => {
          this.form.onSubmit()
        }, 500)
      }
    },
    //所属项目 -- 即来源
    async getSourceListRequest() {
      const sourceList = await this.$http.get(`/app/list`)
      if (sourceList && sourceList.length) {
        const list = sourceList.map(item => {
          return {
            label: item.name,
            value: item.code,
          }
        })
        this.searchConfig[2].options = list
      }
    },
  },
  mounted() {
    document.querySelector('.layout-container__main').style.background = '#f7f7f7'
    document.querySelector('.layout-container__main').style.padding = 0
    this.getSourceListRequest()
  },
  destroyed() {
    document.querySelector('.layout-container__main').style.background = '#fff'
    document.querySelector('.layout-container__main').style.padding = '10px 20px'
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
